<template>
  <div class="wp">
      <div class="header_find">
          <h3 class="txt_fin_hdr">探索</h3>
        <i slot="icon" class="iconfont icon-icon-2 find_icon" :class="isnone2?'colors':''" @click="a1"></i>
        <i slot="icon" class="iconfont icon-icon-1 find_icon" :class="isnone1?'colors':''" @click="a2"></i>
      </div>
      <div class="h-find-r"></div>
      <div class="one nones" :class="isnone2?'nones_1':''">
      <div class="content_find">
        <img src="@/assets/3_1.png" class="fp_1" @click="det">
        <h3 class="txt_fin">
           三体：死神永生
        </h3>
        <h4 class="txt_fin2">
            刘慈欣
        </h4>
        <img src="@/assets/3_2.png" class="fp_2">
        <img src="@/assets/3_2.png" class="fp_2">
        <img src="@/assets/3_2.png" class="fp_2">
        <img src="@/assets/3_2.png" class="fp_2">
        <h5 class="txt_fin3">
            457 人已阅读
        </h5>
      </div>
      <div class="eject">
          <img src="@/assets/3_3.png" class="fp_3">
          <h5 class="txt_fin4">陈小东</h5>
          <h5 class="txt_fin5">推荐</h5>
      </div>
    </div>
    <div class="two nones" :class="isnone1?'nones_1':''">
       <ul class="fin_ul">
          <li class="ff">
              <img src="@/assets/2_12.png" class="fp_4" @click="det">
              <h5>三体：死神永生</h5>
          </li>
           <li class="fr">
              <img src="@/assets/2_13.png" class="fp_4">
              <h5>人类简史</h5>
          </li>
           <li class="ff">
              <img src="@/assets/2_12.png" class="fp_4" @click="det">
              <h5>三体：死神永生</h5>
          </li>
           <li class="fr">
              <img src="@/assets/2_13.png" class="fp_4">
              <h5>人类简史</h5>
          </li>
       </ul>
    </div>
    <div class="fr"></div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
      isnone1:false,
      isnone2:true
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
     a1(){
        this.isnone1=false,
        this.isnone2=true
     },
     a2(){
        this.isnone1=true,
        this.isnone2=false
     },
     det(){
        this.$router.push('/details')
     }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
.nones{
    display: none;
}
    .header_find {
  width: 100%;
  height: 200px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #21272e;
  z-index: 999
    }
    .h-find-r{
        height: 200px;
    }
    .txt_fin_hdr{
    position: absolute;
    left: 50%;
    top: 95px;
    transform: translate(-50%);
    	font-size: 44px;
	    font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0px;
    	color: #ffffff;
  }
  .find_icon{
      float: right;
      font-size: 32px;
      margin-top: 114px;
            margin-right: 24px;
      color: #71768c;
  }
  .content_find{
      width: 390px;
      margin: 0 auto;
      text-align: center;
  }
  .fp_1{
    width: 390px;
    margin-top: 30px;
  }
   .txt_fin{
       padding-top: 30px;
    font-size: 44px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
   }
   .txt_fin2{
       padding-top: 25px;
       padding-bottom: 70px;
    width: 100%;
    font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #656a7b;
    border-bottom: 3px solid #2e3640;
   }
   .txt_fin3{
    padding-top: 10px;
    font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #a2a8ba;
   }
   .fp_2{
       width: 68px;
       margin-top: 45px;
       padding: 0 5px;
   }
   .fp_3{
       width: 68px;
       padding: 8px 12px;
       float: left;
   }
   .eject{
    position: fixed;
    right: -60px;
    bottom: 250px;
    animation:myfirst 2s;
    overflow: hidden;
    width: 300px;
	height: 84px;
	background-color: #15191d;
    border-radius: 50px;
   }
   @keyframes myfirst
{
	0%   { right:-300px; bottom: 250px;}
	100%  { right:-60px; bottom: 250px;}
}

   .txt_fin4{
       padding-top: 15px;
       float: left;
    font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
   }
   .txt_fin5{
       margin-top: -6px;
       width: 60%;
    float: left;
    font-size: 22px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #707483;
   }
   .fin_ul{
       overflow: hidden;
       padding: 91px;
       text-align: center;
       .ff{
           float: left;
       }
       .fr{
           float: right;
       }
       li{        
           margin-bottom: 100px;
           h5{
    font-size: 28px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
           }
       }
       .fp_4{
              width: 268px;
           }
   }
   .colors {
       color: #fff;
   }
   .nones_1{
       display: block;
   }
</style>